<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>点微博数据</title>
    <script include="mapv" src="./static/libs/include-openlayers-local.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = new ol.Map({
            //地图容器div的ID
            target: 'map',
            //地图容器中加载的图层
            layers: [],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: ol.proj.fromLonLat([110, 30]),
                //地图初始显示级别
                zoom: 2,
                //最小级别
                minZoom: 1,
                //最大级别
                maxZoom: 12
            })
        });

        map.addLayer(new ol.layer.Tile({
            source: new ol.source.TileImage({
                // url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' +
                //     'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
                url:'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.jpg?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'
            })
        }))

        var randomCount = 500;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: ol.proj.transform([75 + Math.random() * 50, 20.3 + Math.random() * 20],
                        'EPSG:4326', 'EPSG:3857')
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var mapVOptions = {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            size: 40,
            globalAlpha: 0.5,
            label: {
                show: true,
                fillStyle: 'white',
                shadowColor: 'yellow',
                font: '15px Arial',
                shadowBlur: 10
            },
            gradient: {
                0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"
            },
            shadowColor: 'rgba(255, 255, 50, 1)',
            shadowBlur: 10,
            max: 100,
            draw: 'grid'
        }

        map.addLayer(
            new ol.layer.Image({
                source: new ol.source.Mapv({
                    map: map,
                    dataSet: dataSet,
                    mapVOptions: mapVOptions
                })
            })
        );
    </script>

</body>

</html>